<template>
  <div class="app-container">
    <div class="setbox" v-if="!isDefaultMenu">
      <popover-switch-col ref="popoverColRef" @changeTable="changeTable" />
      <popover-switch-search ref="popoverSearchRef" @changeTable="changeTable" />
      <popoverSwitchSort ref="popoverSortRef" @changeTable="changeTable" />
      <el-button icon="el-icon-thumb" type="text" @click="handleButtonConfig">按钮设置</el-button>
      <el-button icon="el-icon-setting" type="text" @click="handlePluginConfig">插件设置</el-button>
      <el-button type="text" icon="el-icon-edit" @click="handleDesign">表单设计</el-button>
    </div>
    <div class="mainbox">
      <dt-table
        :key="key"
        ref="table"
        v-loading="loading"
        :table-opts="tableOpts"
        :is-show-column="false"
      />
      <button-config ref="buttonConfigRef" />
      <plugin-config ref="pluginConfigRef" />
    </div>
  </div>
</template>
<script>
import { getTableOptions } from '@/framework/views/developer-center/application-center/application-system/applicationFormDesign/build/generator/json-data'
import popoverSwitchCol from './popoverSwitchCol.vue'
import popoverSwitchSearch from './popoverSwitchSearch.vue'
import popoverSwitchSort from './popoverSwitchSort.vue'
import buttonConfig from './buttonConfig.vue'
import pluginConfig from './pluginConfig.vue'
import { queryPageDesign, queryListDesign } from '@/framework/api/developerCenter/formDesignData'
import buttonConfigApi from '@/framework/api/developerCenter/application-system/buttonConfig'

export default {
  components: {
    popoverSwitchCol,
    popoverSwitchSearch,
    popoverSwitchSort,
    buttonConfig,
    pluginConfig
  },
  props: {
    isDefaultMenu: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableOpts: {},
      // 表单结构
      formJson: { fields: [{ __config__: { label: '物品名称', labelWidth: null, showLabel: true, changeTag: true, tag: 'el-input', tagIcon: 'input', icon: 'Language', required: false, layout: 'colFormItem', span: 24, document: 'https://element.eleme.cn/#/zh-CN/component/input', regList: [], isFromTable: true, tableColumnType: 'input', formId: 101, renderKey: '1011698306291755' }, __slot__: { prepend: '', append: '' }, placeholder: '请输入物品名称', style: { width: '100%' }, clearable: true, 'prefix-icon': '', 'suffix-icon': '', maxlength: 30, 'show-word-limit': false, readonly: false, disabled: false, show: true, developerShow: true, search: true, tagType: 'text', isModelDisable: true, modelType: '字符串', __vModel__: 'field101' }, { __config__: { label: '规格型号', showLabel: true, labelWidth: null, tag: 'el-select', tagIcon: 'select', icon: 'arrow-down', layout: 'colFormItem', dataType: 'static', span: 24, required: false, regList: [], isFromTable: true, changeTag: true, document: 'https://element.eleme.cn/#/zh-CN/component/select', tableColumnType: 'select', method: 'get', formId: 102, renderKey: '1021698306310570', defaultValue: '1' }, __slot__: { options: [{ label: '大', value: '1' }, { label: '中', value: '2' }, { label: '小', value: '3' }] }, placeholder: '请选择规格型号', style: { width: '100%' }, clearable: true, disabled: false, show: true, developerShow: true, search: false, filterable: false, multiple: false, isModelDisable: true, modelType: '字符串', __vModel__: 'field102' }, { __config__: { label: '数量', showLabel: true, changeTag: true, labelWidth: null, tag: 'el-input-number', tagIcon: 'number', icon: 'timer', defaultValue: 0, span: 24, layout: 'colFormItem', required: false, isFromTable: true, regList: [], document: 'https://element.eleme.cn/#/zh-CN/component/input-number', tableColumnType: 'number', formId: 103, renderKey: '1031698306322471' }, placeholder: '数量', step: 1, 'step-strictly': false, 'controls-position': '', disabled: false, show: true, developerShow: true, search: false, tagType: 'number', isModelDisable: true, modelType: '数字', __vModel__: 'field103' }, { __config__: { label: '出场日期', tag: 'el-date-picker', tagIcon: 'date', icon: 'calendar', defaultValue: null, showLabel: true, labelWidth: null, span: 24, layout: 'colFormItem', required: false, regList: [], isFromTable: true, changeTag: true, document: 'https://element.eleme.cn/#/zh-CN/component/date-picker', tableColumnType: 'date', formId: 106, renderKey: '1061698306543557' }, isDefaultValueShow: false, placeholder: '请选择出场日期', type: 'date', style: { width: '100%' }, disabled: false, show: true, developerShow: true, search: false, clearable: true, format: 'yyyy-MM-dd', 'value-format': 'yyyy-MM-dd', readonly: false, tagType: 'date', isModelDisable: true, modelType: '日期', __vModel__: 'field106' }, { __config__: { label: '物品简介', labelWidth: null, showLabel: true, tag: 'el-input', tagIcon: 'textarea', icon: 'tickets', required: false, layout: 'colFormItem', span: 24, regList: [], changeTag: true, isFromTable: true, document: 'https://element.eleme.cn/#/zh-CN/component/input', tableColumnType: 'textarea', formId: 105, renderKey: '1051698306355198' }, type: 'textarea', placeholder: '请输入物品简介', autosize: { minRows: 4, maxRows: 4 }, style: { width: '100%' }, maxlength: 30, 'show-word-limit': false, readonly: false, disabled: false, show: true, developerShow: false, search: true, tagType: 'text', isModelDisable: true, modelType: '字符串', __vModel__: 'field105' }], formRef: '采购信息', tableCode: 'cf_jls0jo9k', formModel: 'formData', size: 'medium', labelPosition: 'right', labelWidth: 100, formRules: 'rules', gutter: 0, disabled: false, span: 24, formBtns: true },
      loading: false,
      // btnlist: [
      //   {
      //     label: '新增',
      //     type: 'primary',
      //     buttonCode: 'add',
      //     status: 1, // 0不显示 1显示
      //     location: 1, // 1 上边，
      //     buttonType: 0 // 内置buttonType=0，新增的按钮都是自定义按钮buttonType=1
      //   },
      //   {
      //     label: '批量删除',
      //     buttonCode: 'batchDel',
      //     status: 1,
      //     location: 1, // 1 上边
      //     buttonType: 0
      //   },
      //   {
      //     label: '导入',
      //     buttonCode: 'dataImport',
      //     status: 1,
      //     location: 1, // 2 操作列
      //     buttonType: 0
      //   },
      //   {
      //     label: '导出',
      //     buttonCode: 'dataExport',
      //     status: 1,
      //     location: 1, // 1 上边
      //     buttonType: 0
      //   },
      //   {
      //     text: '编辑',
      //     buttonCode: 'edit',
      //     status: 1,
      //     location: 2, // 2 操作列
      //     buttonType: 0
      //   },
      //   {
      //     text: '详情',
      //     buttonCode: 'detail',
      //     status: 1,
      //     location: 2, // 2 操作列
      //     buttonType: 0
      //   },
      //   {
      //     text: '删除',
      //     buttonCode: 'delete',
      //     status: 1,
      //     location: 2, // 1 上边
      //     buttonType: 0
      //   }
      // ],
      btnlist: [],
      list: [],
      toolbarBtn: [],
      operatorBtn: [],
      formId: '',
      key: 0,
      isHaveFlow: false,
      flowCol: [],
      defaultCol: []
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        this.$refs.popoverColRef && this.$refs.popoverColRef.$refs.popoverRef.doClose()
        this.$refs.popoverSearchRef && this.$refs.popoverSearchRef.$refs.popoverRef.doClose()
        this.$refs.popoverSortRef && this.$refs.popoverSortRef.$refs.popoverRef.doClose()
        this.formId = newVal.query.formId
        this.loading = true
        this.formJson = {}
        this.getFormJson()
      },
      immediate: true
    }
  },
  mounted() {
    this.formId = this.$route.query.formId
    // 1.获取设计表单，formJson
    this.getFormJson()
    // 2.获取按钮列表 ，将显示按钮处理成table所需的两类 toolbarBtn operatorBtn
    // this.getBtnList()
  },
  methods: {
    // 1 获取formjson
    getFormJson() {
      // this.formJson = this.formJson
      // queryPageDesign({ formId: this.formId }).then((res) => {
      queryListDesign({ formId: this.formId }).then((res) => {
        this.formJson = JSON.parse(res.data.formContent)
        const menuType = res.data && res.data.formCode ? res.data.formCode.slice(0, -9) : ''
        this.isHaveFlow = res.data.bind === 1
        this.flowCol = res.data.flowContent ? JSON.parse(res.data.flowContent) : []
        // this.defaultCol = res.data.defaultColumnContent ? JSON.parse(res.data.defaultColumnContent) : []
        // 2.获取按钮列表 ，将显示按钮处理成table所需的两类 toolbarBtn operatorBtn
        if (!this.isDefaultMenu) { // 除了流程那块的菜单
          this.getBtnList()
        } else {
          // 流程那边的菜单，需要的按钮不同,只需要一个详情按钮，点击跳转到流程详情页面
          this.operatorBtn = [{
            text: menuType == 'myTodo' ? '处理' : '详情',
            buttonCode: 'detail',
            status: 1,
            location: 2, // 2 操作列
            buttonType: 0,
            click: () => {}
          }]
          this.changeTable(this.formJson, [], this.operatorBtn)
        }
      })
    },
    // 2.获取按钮列表
    getBtnList() {
      buttonConfigApi.getLowCodeButtonList({ formId: this.formId }).then((res) => {
        this.btnlist = res.data
        this.getTableBtn(this.btnlist)
      })
    },
    // 3 将按钮处理成table所需的两类 toolbarBtn operatorBtn
    getTableBtn(btnlist) {
      const btnlistShow = btnlist.filter((item) => {
        return item.status === 1 // 从所有按钮中筛选要显示的按钮
      })
      this.toolbarBtn = [] // 要展示在上方的按钮
      this.operatorBtn = [] // 要展示在操作列的按钮
      btnlistShow.forEach((item, index) => {
        // 内置按钮
        if (item.buttonType === 0) { // 内置buttonType=0
          // 位置location=1左上角
          item.location === 1 && item.label !== '列表' && this.toolbarBtn.push(item)
          // 位置location=2操作列
          item = { ...item, click: () => {} }
          item.location === 2 && this.operatorBtn.push(item)
        } else {
          // 自定义按钮 buttonType=1， 按钮都放操作列
          // actionType  动作类型 1打开视图 2 执行动作
          this.toolbarBtn.push(item)
        }
      })
      this.changeTable(this.formJson, this.toolbarBtn, this.operatorBtn)
    },
    changeTable(formJson, toolbarBtn, operatorBtn) {
      // json to form
      // this.tableOpts = getTableOptions(formJson, toolbarBtn || this.toolbarBtn, operatorBtn || this.operatorBtn)
      this.$nextTick(() => {
        this.tableOpts = getTableOptions(formJson, toolbarBtn || this.toolbarBtn, operatorBtn || this.operatorBtn)
        this.$forceUpdate()
        this.key++
        this.tableOpts.tableData = [{}]
        // this.tableOpts.tableCol = [...this.tableOpts.tableCol, ...this.defaultCol]
        if (this.isHaveFlow) {
          this.tableOpts.tableCol = [...this.tableOpts.tableCol, ...this.flowCol]
        }
        this.loading = false
      })
    },
    // // 默认table列
    // changeDefaltCol(defaultCol) {
    //   this.defaultCol = defaultCol
    // },
    // 设计
    handleDesign(row) {
      const { appName, menuId, formId, appCode, appId } = this.$route.query
      const data = { appName, menuId, formId, appCode, appId }
      data.formName = this.$store.state.developerCenter.activeMenu.menuName
      this.$router.push({ path: '/applicationFormDesign', query: data })
    },
    handleButtonConfig() {
      this.$refs.buttonConfigRef.openDrawer()
    },
    handlePluginConfig() {
      this.$refs.pluginConfigRef.openDrawer()
    }
  }
}
</script>
  <style scoped lang="scss" >
  .setbox{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    right: 20px;
    height: 40px;
    padding: 0 20px;
    >span{
      margin-right: 16px;
    }
    // position: absolute;
    // top: 0px;
    // left: 0;
    // width: 100%;
    // z-index: 999999;

  }
  .el-button--text{
      color: #333;
    }
    .el-button--text:hover{
      color:var(--themeColor);
    }

  </style>

